<template>
	<view class="mySettings">
		<!-- 我的信息 -->
		<view class="form">
			<view class="list">
				<input type="text" v-model="form.name" placeholder="姓名" data-input="name" @input="input" />
			</view>
			<view class="list">
				<input type="text" v-model="form.phone" disabled placeholder="手机号码" data-input="tel" @blur="input" />
				<!-- <image src="../../static/mine/wdsztj.png" mode="widthFix" @tap="addTel"></image> -->
				<button class="image btn_none" type="default" hover-class="none" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点击获取</button>
			</view>
			<view class="list" v-if="isTels.length > 0" v-for="(item,index) in isTels" :key="index">
				<input type="text" :value="item" placeholder="手机号码" @blur="tels" />
				<image src="../../static/mine/wdszsc.png" mode="widthFix" :data-tels="index" @tap="deleteTel"></image>
			</view>
			<view class="list" @tap.stop="isRegion = true">
				<input type="text" v-model="form.province" disabled placeholder="省份/城市/区县" />
				<u-picker mode="region" v-model="isRegion" @confirm="confirm"></u-picker>
			</view>
			<view class="list">
				<input type="text" v-model="form.address" placeholder="详细地址，如街道/楼牌号" data-input="addressDetails" @input="input" />
			</view>
		</view>
		<!-- 地址列表 -->
		<view class="address_list flex-r-b-c" @tap="goAddress">
			<view class="list_l">收货地址</view>
			<u-icon name="arrow-right" color="#ACACAC" size="20"></u-icon>
		</view>

		<!-- 按钮 -->
		<view class="btn_box">
			<view class="preservation" @tap="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTels: [],
				inputTels: [],
				form: {
					name: '',
					phone: '',
					province: '',
					address: ''
				},
				isRegion: false,
				reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
			};
		},
		onLoad() {
			this.getMySetUp()
		},
		methods: {
			// 获取个人资料
			getMySetUp(){
				let that = this
				that.$api.mySetUp().then(res => {
					console.log(res)
					that.form = res.data.data
				})
			},
			// 获取手机号
			getPhoneNumber(e){
				console.log(e)
				let that = this
				var data = {}
				uni.checkSession({
					success(res) {
						console.log(res)
						if (res.errMsg == 'checkSession:ok') {
							data = {
								sessionKey: uni.getStorageSync('user_info').data.sessionKey,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}
							that.$api.getPhone(data).then(res => {
								console.log(res)
								that.form.phone = res.data.data
							})
						} else {
							uni.login({
								success(res) {
									console.log(res)
									data = {
										code: res.code,
										encryptedData: e.detail.encryptedData,
										iv: e.detail.iv
									}
									that.$api.getPhone(data).then(res => {
										console.log(res)
										that.form.phone = res.data.data
									})
								}
							})
						}
					}
				})
			},
			// 获取地址信息
			confirm(e){
				this.form.province = e.province.label + e.city.label + e.area.label
			},
			// 跳转地址列表
			goAddress(){
				uni.navigateTo({
					url: '/order/addressList/addressList'
				})
			},
			// 添加电话号码
			addTel() {
				let tels = ''
				this.isTels = this.isTels.concat(tels)
			},
			// 删除电话
			deleteTel(e){
				this.isTels = this.inputTels
				let index = e.currentTarget.dataset.tels;
				this.isTels.splice(index , 1)
			},
			// input
			input(e) {
				let input = e.currentTarget.dataset.input
				let value = e.detail.value
				if (input == 'name') {
					this.form.name = value
				} else if (input == 'tel') {
					if(!this.reg_tel.test(value)){
						uni.showToast({
							title: '请填写正确的手机号',
							icon: 'none'
						})
					} else {
						this.form.phone = value
					}
				} else if (input == 'region') {
					this.form.province = value
				} else if (input == 'addressDetails') {
					this.form.address = value
				}
			},
			// input 失去焦点
			tels(e) {
				let value = e.detail.value
				if(!this.reg_tel.test(value)){
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					})
				} else {
					this.inputTels = this.inputTels.concat(value)
				}
			},
			// 提交
			submit(){
				let that = this
				if(that.form.name == ''){
					uni.showToast({
						title: '请填写你的姓名',
						icon: 'none'
					})
				} else if(that.form.phone == ''){
					uni.showToast({
						title: '请填写你的手机号',
						icon: 'none'
					})
				} else if(that.form.province == ''){
					uni.showToast({
						title: '请填写省市区',
						icon: 'none'
					})
				} else if(that.form.address == ''){
					uni.showToast({
						title: '请填写详情地址',
						icon: 'none'
					})
				} else {
					that.isTels.length == 0 ? '' : that.form.phone = that.inputTels.concat(that.form.phone).join()
					
					that.$api.mySetUp_submit(that.form).then(res => {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						that.isTels = []
						that.inputTels = []
					})
				}
			}
			
		}
	}
</script>

<style lang="less">
	.mySettings {
		width: 90vw;
		margin: 40rpx auto;

		.form {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.list {
				height: 80rpx;
				border-bottom: 1px solid #F2F2F2;
				position: relative;

				input {
					height: 80rpx;
				}
				.image {
					width: auto;
					height: 100%;
					line-height: 80rpx;
					border: 0px !important;
					font-size: 30rpx;
					position: absolute;
					right: 20rpx;
					background-color: #FFF0!important;
					top: 50%;
					transform: translateY(-50%);
					z-index: 10;
				}

				&:last-child {
					border: none;
				}
			}

			//
		}

		//
		.address_list {
			width: 100%;
			height: 88rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			background-color: #FFFFFF;
			margin: 30rpx auto;

			.list_l {
				font-size: 28rpx;
				color: #7E7E7E;
				font-weight: 500;
			}
		}

		//
		.btn_box {
			width: 100%;
			margin: 200rpx auto;

			.preservation {
				margin: 20rpx auto;
				width: 80%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 40rpx;
				color: #FFFFFF;
				background-color: #45806E;
				font-size: 32rpx;
				font-weight: 500;
			}

			.delete {
				margin: 20rpx auto;
				width: 80%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #FFFFFF;
				border: 1px solid #CCCCCC;
				color: #4B4B4B;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
